import React, { Component } from 'react'
import './activity.scss'
import { Pagination } from 'antd';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiBanner , getApiBrandList , getApiHomeBrandType } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage';

export default class activity extends Component {

    state = {
        banner:[],

        classList:[],

        page:1,
        total:1,

        currentIndex:0,
        typeArr:[],
        type:'',
        time:'',
        price:'',
        format:'',
        timeArr:[],
        priceArr:[],
        formatArr:[],
        second:'',
        third:'',
        secondType:'',
        thirdType:'',
    }

    componentWillMount(){
        getApiBanner({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    banner:req.data.data
                })
            }
        }).catch( err =>{
            console.error(err);
        })


        let id = UrlSearch('id');
        if(id){
            this.setState({
                type:parseInt(id)
            })
        }

        getApiHomeBrandType({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        })
        .then( req =>{
            if(req.data.code === 1){

                let data = req.data.data;


                this.setState({
                    typeArr:data,
                    // type:data[0].id
                })

                this.getData();
            }
        }).catch( err =>{
            console.error(err);
        })

        
    }

    componentDidMount(){
        window.scroll(0,0);
    }
    
    getData=(page)=>{
        setTimeout(()=>{
            let param = {
                // token:get('token'),
                type:this.state.type,
                types:get('type')?get('type'):0,
                content:get('city')?get('city'):get('mechanism'),
                page:page?page:1
            }

            getApiBrandList(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList:data
                    })
                }
            }).catch( err =>{
                console.error(err);
            })

        },50)
    }
    
    gotoSlide=(num)=>{
        this.refs['bslide'].goTo(num);
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.getData(page);
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/activityinfo?id='+id);
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoChooseType=(item)=>{
        this.setState({type:item.id});this.getData();

    }



    render() {
        return (
            <div className="activity">
                <Header />
                <img alt="" src="assets/imgs/zhuangshi3.png" className='hp_bg' />
                <div className="main">
                
                    {/* <div className="mhead">
                        <div className="cen">
                            <div className="hbox">
                                <div className="hitem">
                                    <h2>类型：</h2>
                                    {
                                        this.state.typeArr.map((item,index)=>{
                                            return <div key={index} className={this.state.type === item.id?"h_chosen":""} onClick={()=>{this.gotoChooseType(item)}}>{item.title}</div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        
                    </div> */}
                    <div className='mtype'>
                        <div className="cen">
                            <div className="mmm">
                                <div className="thead">
                                    <div>
                                        <img className="img" alt="" src="assets/imgs/dingwei.png" />
                                        <p className="p_point" onClick={()=>{
                                            if(get('type')){
                                                // this.gotoPage('/index')
                                                this.gotoPage('/home')
                                              }else{
                                                this.gotoPage('/home')
                                              }
                                        }}>首页</p>
                                        <img className="icon" alt="" src="assets/imgs/gengduo2.png" />
                                        <p>品牌活动</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='cen btp'>
                            <div className='mtm'>
                                {
                                    this.state.typeArr.map((item,index)=>{
                                        return <div className='mti' onClick={()=>{this.gotoChooseType(item)}} key={index} style={{backgroundImage:"url('"+item.image+"')"}}>
                                            <div className={this.state.type === item.id?"mt_active":""}>
                                                {item.title}
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                    <div className="cen">
                            <div className="h_course">
                                <div className="none" hidden={this.state.classList.length !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类活动</p>
                                </div>
                                <div className="box" hidden={this.state.classList.length === 0}>
                                    {
                                        this.state.classList.map((item,index)=>{
                                            return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.id)}}>
                                                        <div className="itop" style={{backgroundImage:"url('"+item.image+"')"}}>
                                                        </div>
                                                        <div className="ibom">
                                                            <h2>{item.title}</h2>
                                                            <p>{item.title}</p>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                <div className='r_page' hidden={this.state.classList.length === 0}>
                                    <Pagination type="primary" showSizeChanger={false} pageSize={15}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                                </div>
                            </div>
                        </div>
                </div>
                <Footer />
            </div>
        )
    }
}
